<template>
  <div id="login">
    <button id="back"
            class="el-icon-back"
            @click="back"><small><small><small> 返回</small></small></small>
    </button>
    <div id="canves">
      <font id="mintext">用户名：</font>
      <input type="text"
             id="account"
             autocomplete="off"
             maxlength="20"
             placeholder="请输入不超过20个字符"
             @change="checkaccount">
      <font id="mitext">密码：</font>
      <input type="password"
             id="password"
             maxlength="18"
             placeholder="请输入6-18为密码"
             @change="checkpwd"><br>
      <font id="emailtext">Email：</font>
      <input type="text"
             id="email"
             autocomplete="off"
             placeholder="请输入您的邮箱"
             @change="checkemail">
      <font id="codetext">验证码：</font>
      <input type="text"
             id="code"
             autocomplete="off">
      <el-button type="text"
                 id="codebtn"
                 @click="code">发送验证码</el-button><br>
      <font id="roletext">身 份：</font>
      <el-dropdown @command="rolecheck">
        <el-button type="primary"
                   plain>
          {{role}}<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="用户">用 户</el-dropdown-item>
          <el-dropdown-item command="商户">商 户</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown><br>
      <el-button id="loginbutton"
                 type="primary"
                 plain
                 @click="commit">注册并登录</el-button>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import http from '../axios_config'


export default {
  data () {
    return {
      can: 0,
      //重新发送时间（秒）
      time: 60,
      role: "身份"
    }
  },

  methods: {
    back () {
      this.$emit("component", 0);
    },
    checkaccount () {
      let input = document.getElementById("account");
      http.get("http://192.168.11.18:8080/user/findByAccount?account=" + input.value).then(res => {
        if (res.data != "success") {
          alert(res.data);
          input.value = "";
        }
      })
    },
    checkpwd () {
      let input = document.getElementById("password");
      if (input.value.length < 6) {
        alert("密码小于6位，不安全，请重新输入！");
        input.value = "";
      }
    },
    checkemail () {
      let letreg_tel = /^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/;
      let input = document.getElementById("email");
      if (!letreg_tel.test(input.value)) {
        alert("请填写正确的邮箱！");
        input.value = "";
      } else {
        http.post("http://192.168.11.18:8080/user/findByEmail", { email: input.value }).then(res => {
          if (res.data != "success") {
            alert(res.data);
            input.value = "";
          }
        })
      }
    },
    code () {
      let input = document.getElementById("email");
      if (this.can == 0 && input.value != "" && input.value != null) {
        //可以按
        this.can = 1;
        http.post("http://192.168.11.18:8080/user/sendCode", { email: input.value, status: 1 }).then(res => {
          console.log(res);
          if (res.data.state == "SUCCESS") {
            this.change();
            let id = setTimeout(() => {
              this.can = 0;
              clearTimeout(id);
            }, this.time * 1000);
          } else {
            alert(res.data.message);
          }
        })
      } else if (input.value == "" || input.value == null) {
        alert("请先填写邮箱！");
      }
    },
    change () {
      let times = this.time;
      let codebtn = document.getElementById("codebtn");
      codebtn.textContent = "重新发送（" + times + " s）";
      let id = setInterval(() => {
        if (times == 0) {
          codebtn.textContent = "发送验证码";
          clearInterval(id);
        } else {
          times = times - 1;
          codebtn.textContent = "重新发送（ " + times + "  s）";
        }
      }, 1000);
    },
    rolecheck (e) {
      this.role = e;
    },
    commit () {
      let account = document.getElementById("account").value;
      let pwd = document.getElementById("password").value;
      let email = document.getElementById("email").value;
      let code = document.getElementById("code").value;
      if (account != null && account != "" && pwd != null && pwd != "" && email != null && email != "" && code != null && code != "" && this.role != "身份") {
        http.post("http://192.168.11.18:8080/user/register", { account: account, password: pwd, email: email, code: code, role: this.role }).then(res => {
          console.log(res);
          if (res.data == "success") {
            //注册成功
            alert("注册成功，欢迎登录！");
            this.$emit("component", 0);
          } else {
            alert(res.data);
            document.getElementById("code").value = "";
          }
        })
      } else {
        alert("请填写完整信息！");
      }
    }
  }

}
</script>
<style scoped>
#login {
  height: 785px;
  width: 100%;
  background-color: rgb(255, 255, 255);
  background-image: url("https://images.wallpaperscraft.com/image/playground_basketball_hoop_art_142155_1920x1080.jpg");
  background-repeat: no-repeat;
  background-size: 100% 785px;
  margin: 0%;
  padding: 0%;
}
#back {
  margin-top: 4.5%;
  margin-left: 6%;
  background: none;
  border: none;
  outline: none;
  color: white;
  font-size: 200%;
}
#canves {
  background: rgba(0, 0, 0, 0.699);
  color: white;
  width: 70%;
  height: 70%;
  position: absolute;
  margin-top: 2%;
  margin-left: 15%;
  border-radius: 30px;
}
#mintext,
#emailtext {
  font-size: 150%;
  margin-top: 5%;
  margin-left: 5%;
}
#codetext {
  font-size: 150%;
  margin-top: 5%;
  margin-left: 9%;
}
#mitext {
  font-size: 150%;
  margin-left: 10%;
}
#account,
#email {
  background: none;
  border: none;
  border-bottom: 1px solid white;
  color: white;
  outline: none;
  font-size: 150%;
  margin-top: 7%;
  margin-bottom: 8%;
}
#code {
  width: 10%;
  font-size: 140%;
  outline: none;
  margin-right: 5%;
}
#password {
  background: none;
  border: none;
  color: white;
  font-size: 150%;
  outline: none;
  border-bottom: 1px solid white;
  margin-bottom: 5%;
}
#roletext {
  font-size: 150%;
  margin-left: 5.5%;
}
#loginbutton {
  margin-top: 5%;
  margin-left: 40%;
  width: 20%;
  height: 10%;
}
</style>